<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<%@ include file="/WEB-INF/include-head.jsp" %>
	<link rel="stylesheet" href="css/pagination.css" />
	<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script type="text/javascript">
	
	$(function(){
		
		// 调用后面声明的函数对页码导航条进行初始化操作
		initPagination();
		
	});
	
	// 生成页码导航条的函数
	function initPagination() {
		
		// 获取总记录数
		var totalRecord = ${requestScope.pageInfo.total};
		
		// 声明一个JSON对象存储Pagination要设置的属性
		var properties = {
			num_edge_entries: 3,								// 边缘页数
			num_display_entries: 5,								// 主体页数
			callback: pageSelectCallback,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
			items_per_page: ${requestScope.pageInfo.pageSize},	// 每页要显示的数据的数量
			current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
			prev_text: "上一页",									// 上一页按钮上显示的文本
			next_text: "下一页"									// 下一页按钮上显示的文本
		};
		
		// 生成页码导航条
		$("#Pagination").pagination(totalRecord, properties);
		
	}
	
	// 回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
	// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
	// pageIndex是Pagination传给我们的那个“从0开始”的页码
	function pageSelectCallback(pageIndex, jQuery) {
		
		// 根据pageIndex计算得到pageNum
		var pageNum = pageIndex + 1;
		
		// 跳转页面
		window.location.href = "sheng/get/page.ht?pageNum="+pageNum+"&keyword=${param.keyword}";
		
		// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
		return false;
	}
	
</script>
  <body>
  		<%@ include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
		<%@ include file="/WEB-INF/include-sidebar.jsp" %>
			
			
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<i class="glyphicon glyphicon-th"></i> 数据列表
					</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline" action="sheng/get/page.ht" method="post" role="form" style="float: left;">
						<div class="form-group has-feedback">
							<div class="input-group">
								<div class="input-group-addon">查询条件</div>
								<input name="keyword" class="form-control has-success" type="text"
									placeholder="请输入查询条件">
							</div>
						</div>
						<button type="submit" class="btn btn-warning">
							<i class="glyphicon glyphicon-search"></i> 查询
						</button>
					</form>
					<button type="button" class="btn btn-danger"
						style="float: right; margin-left: 10px;">
						<i class=" glyphicon glyphicon-remove"></i> 删除
					</button>
					
					<a class="btn btn-primary" style="float: right;"
						onclick="window.location.href='sheng/to/sheng-add.ht'" >
						<i class="glyphicon glyphicon-plus"></i> 新增
					</a>
					
					<br>
					<hr style="clear: both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
							<thead>
								<tr>
									<th width="45">#</th>
									<th width="30"><input type="checkbox"></th>
									<th>省份名称</th>
									<th width="100">操作</th>
								</tr>
							</thead>
							<tbody>
							<c:if test="${empty requestScope.pageInfo.list }">
							<!-- 如果没有数据-->
								<tr>
									<td colspan="6" align="center">抱歉，没有查询到您要找的数据</td>
								</tr>
							</c:if>
							
							<c:if test="${!empty requestScope.pageInfo.list }">
							<!-- 如果有数据，!empty就是不为空，那就循环把数据取出来 -->
								<c:forEach items="${requestScope.pageInfo.list}" var="sheng" varStatus="myStatus">
									<tr>
										<!-- myStatus.count 可以自动把序号列出来 -->
										<td>${myStatus.count }</td>
										<td><input type="checkbox"></td>
										<td>${sheng.shengName }</td>
										<td>
											<!-- 查看按钮  需要回显数据，所以不能直接跳转页面，需要后台处理后返回-->
											<a href="sheng/to/view.ht?id=${sheng.shengid}" class="btn btn-success btn-xs">
												<i class=" glyphicon glyphicon-check"></i>
											</a>
											<!-- 修改/编辑按钮 需要回显数据-->
											<a href="sheng/to/edit.ht?id=${sheng.shengid}&pageNum=${requestScope.pageInfo.pageNum}&keyword=${param.keyword}" class="btn btn-primary btn-xs">
												<i class=" glyphicon glyphicon-pencil"></i>
											</a>
											<!-- 单条数据 删除按钮 -->
											<a  href="sheng/delete/one/${sheng.shengid}/${requestScope.pageInfo.pageNum}/${param.keyword}.ht" class="btn btn-danger btn-xs">
												<i class=" glyphicon glyphicon-remove"></i>
											</a>
						
										</td>
									</tr>
								</c:forEach>
							</c:if>
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6" align="center">
<!-- 									<ul class="pagination">
											<li class="disabled"><a href="#">上一页</a></li>
											<li class="active"><a href="#">1 <span
													class="sr-only">(current)</span></a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">4</a></li>
											<li><a href="#">5</a></li>
											<li><a href="#">下一页</a></li>
										</ul> -->
										
										<div id="Pagination" class="pagination"><!-- 这里显示分页（代替了上面的代码） --></div>
										
									</td>
								</tr>

							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>



	</div>
  </body>
</html>
